<template>
	<div class="person_list_wrapper">
		<div class="person_list">
			<div class="item" v-for="(item, index) in userList" :key="index">
				<template v-if="userInfo.id !== item.relId">
					<el-button type="text" icon="el-icon-remove-outline" @click="handleDeleteUser(index)"></el-button>
				</template>
				<el-avatar :size="64" :src="item.picPath | picPathFilter(siteInfo)"></el-avatar>
				<h4>{{ item.relName }}</h4>
			</div>
			<div class="item">
				<el-button type="text" icon="el-icon-plus" @click="handleAddedUser()"></el-button>
				<el-avatar :size="64"></el-avatar>
				<h4>添加</h4>
			</div>
		</div>
		<select-user v-model="userDialog" :data="userList" @submit="handleSubmitSelect"></select-user>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import selectUser from '@/components/selectUser';
import emitter from 'element-ui/src/mixins/emitter';
export default {
	components: { selectUser },
	mixins: [emitter],
	props: {
		value: { type: Array, default: () => [] }
	},
	data() {
		return {
			userList: this.value,
			userDialog: false
		};
	},
	computed: { ...mapGetters(['siteInfo', 'userInfo']) },
	filters: {
		picPathFilter(input, data) {
			if (!!input) {
				return window.staticPath + input;
			} else if (!!data.userPicPath) {
				return window.staticPath + data.userPicPath;
			} else {
				return require('@/assets/img/avatar_image.png');
			}
		}
	},
	watch: {
		value(arr) {
			this.userList = arr;
		},
		userList(arr) {
			this.$emit('input', arr);
			this.dispatch('ElFormItem', 'el.form.change', [arr]);
		}
	},
	methods: {
		//添加用户
		handleAddedUser() {
			this.userDialog = true;
		},

		//删除用户
		handleDeleteUser(index) {
			this.userList.splice(index, 1);
		},

		//提交选中用户
		handleSubmitSelect(arr, list) {
			this.userDialog = false;
			this.userList = [...list];
		}
	}
};
</script>

<style lang="scss" scoped>
.person_list {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	position: relative;
	.item {
		display: flex;
		flex-direction: column;
		margin-right: 10px;
		h4 {
			width: 64px;
			margin: 10px 0;
			overflow: hidden;
			text-align: center;
			font-weight: normal;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.el-button {
			position: absolute;
			width: 64px;
			height: 64px;
			font-size: 20px;
			border-radius: 50%;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.25);
			display: none;
		}
		&:last-child {
			margin-right: 0;
			.el-button {
				display: block;
			}
		}
		&:hover .el-button {
			display: block;
		}
	}
}
</style>
